<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>账号注册</title>
</head>
<script th:src="@{https://code.jquery.com/jquery-3.5.1.min.js}"></script>
<script>
    function changeVerPic() {
        const src = "/getVerImg?" + new Date().getTime(); //加时间戳，防止浏览器利用缓存
        $('.verifyCode').attr("src", src);
    }


    function doit() {
        var val = $("#username").val();
        $.get({
            url:"[[@{/isRegister}]]",
            data:{'username':val},
            success:function (data) {
                if (data == '1') {
                    $("#sssw").text('此账号已被注册！');
                } else  if (data=='2'){
                    $("#sssw").text('此账号格式不合法！');
                }else {
                    $("#sssw").text('此账号可用！');
                }
            }
        });
    }

    function doit2() {
        var val = $("#username").val();
        var val1 = $("#password").val();
        var val2 = $("#password2").val();
        var val3 = $("#verifyCode").val();
        $.post({
            url: "[[@{/reg}]]",
            data: {
                'username':val,
                'password':val1,
                'password2':val2,
                'verifyCode':val3
            },
            success:function (data) {
                $("#dede").text(data)
            }
        })
    }
</script>
<body>
<h2 align="center" style="margin-top: 10px">账号注册</h2>
<div align="center" style="margin-top: 20px">
    <form>
        请输入用户名：<input type="text" id="username" name="username" onblur="doit()"/>
        <span id="sssw">
    </span>
        <br><br>
        请输入密码：<input type="password" id="password" name="password" /><br><br>
        请确认密码：<input type="password" id="password2" name="password2"/><br><br>
        请输入验证码：<input type="text" id="verifyCode" name="verifyCode">
        <br>
        <img th:src="@{/getVerImg}" id="ver" class="verifyCode" onclick="changeVerPic()"><br><br>
        <input type="reset" value="重置">
        <input type="button" value="注册" onclick="doit2()">
    </form>
    <div id="dede"></div>
</div>
</body>
</html>